{% extends "base.html" %}
{% block title %}{{title}} - checklist {% endblock %}
{% block checklist %}
<!--CSS file (default YUI Sam Skin) -->
<link type="text/css" rel="stylesheet"
      href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css">
<link rel="stylesheet" type="text/css"
      href="http://yui.yahooapis.com/2.7.0/build/container/assets/skins/sam/container.css">
<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"></script>
<!-- OPTIONAL: JSON Utility (for DataSource) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/json/json-min.js"></script>
<!-- OPTIONAL: Connection Manager (enables XHR for DataSource) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"></script>
<!-- OPTIONAL: Drag Drop (enables resizeable or reorderable columns) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script>
<!-- Source files -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/button/button-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container-min.js"></script>        
<style type="text/css">
    .align_center {
        text-align: center !important;
    }
</style>
<script type="text/javascript">
    YAHOO.util.Event.addListener(window, "load", function() {
        YAHOO.checklist.columns.RowDataMod = function() {
            var imageFormatter = function(elCell, oRecord, oColumn) {
                elCell.innerHTML = '<input type="image" src="/static/images/' + oColumn.key + '.png" name="' + oColumn.key + '" title="' + oColumn.label + ' row" />';
                elCell.style.cursor = 'pointer';
            };

            var myColumnDefs = [
                {key:"check",resizeable:true,label:"",formatter:YAHOO.widget.DataTable.formatCheckbox,className:"align_center"},
                {% for column in checklist_columns%}
                   {key:"{{column.name}}",resizeable:true,label:"{{column.name}}"},
                {% endfor %}
                {key:"up",resizeable:true,label:"Up",formatter:imageFormatter},
                {key:"down",resizeable:true,label:"Down",formatter:imageFormatter}
            ];

            var myDataSource = new YAHOO.util.DataSource({{checklist.checklist_items}});
            myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
            myDataSource.responseSchema = {
                fields: [
                    {% for column in checklist_columns%}
                          "{{column.name}}"{% if not forloop.last %},{% endif %}
                    {% endfor %}
                        ]
            };

            var myDataTable = new YAHOO.widget.DataTable("checklist_items",
                    myColumnDefs, myDataSource, {draggableColumns:true});

            // Selects any cell that receives a checkbox click
            myDataTable.subscribe("checkboxClickEvent", function(oArgs) {
                var elCheckbox = oArgs.target;
                var elRow = this.getTrEl(elCheckbox);
                if (elCheckbox.checked) {
                    this.selectRow(elRow);
                } else {
                    this.unselectRow(elRow);
                }
            });
            myDataTable.subscribe("cellClickEvent", myDataTable.onEventShowCellEditor);

            // Define various event handlers for Dialog
            var handleSubmit = function() {
                
                //this.submit();
            };
            var handleCancel = function() {
                this.cancel();
            };
            var myDlg = new YAHOO.widget.SimpleDialog("dialog_addItem",
            { width : "30em",
                fixedcenter : true,
                visible : false,
                constraintoviewport : true,
                buttons : [ { text:"Submit", handler:handleSubmit },
                    { text:"Cancel", handler:handleCancel } ]
            });
            myDlg.render();

            // Nulls out myDlg to force a new one to be created
            myDataTable.subscribe("columnReorderEvent", function() {

            }, this, true);

            YAHOO.util.Event.addListener("addItem", "click", myDlg.show, myDlg, true);

    return {
                ds: myDataSource,
                dt: myDataTable
            };
        }();
    });
</script>
<div>
        <input name=checklist_columns type="hidden"/>
        <table class="noborder_table">
            <tr>
                <td>
                    Checklist name:
                </td>
                <td>{% if checklist %}{{checklist.name}}{% endif %}</td>
                <td align="right"><img src="/static/images/printer.png">Print</td>
            </tr>
            <tr>
                <td>Checklist description:</td>
                <td>{% if checklist %}{{checklist.description}}{% endif %}</td>
            </tr>
            <tr>
                <td>Tags:</td>
                <td>
                    {% for tag in checklist.tags %}
                    <a href="/tag/{{ tag|unquote }}">{{ tag|unquote }}</a>{% if not forloop.last %},{% endif %}&nbsp;
                    {% endfor %}
                </td>
            </tr>
        </table>
    <br>
    <div>
        <div style="padding-bottom:3px">
            <button id="addItem">Create New Item</button>
            <button id="deleteItem">Delete</button>
        </div>
       <div id="checklist_items"></div>
    </div>
</div>
<div id="dialog_addItem">
<div class="hd">Please enter the item information</div>
<div class="bd">
    <table class="noborder_table">
    {% for column in checklist_columns %}
        <tr><td> <label for="{{column.name}}">{{column.name}}:</label></td>
            <td><input type="textbox" name="{{column.name}}" /></td></tr>
    {% endfor %}
     </table>
</div>
</div>
<br>
{% endblock %}

